<template>
<div class="wrapper">
 <swiper :options="swiperOption" v-if="showSwiper"> 
    <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" alt="">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>
<script>
export default {
    name:'HomeSwiper',
    props:{
        list:Array
    },
    data() {
        return {
            swiperOption:{
                // 添加轮播图圆点
              pagination:'.swiper-pagination',
            //   支持循环轮播
            loop:true
            },
        }
    },
    // 解决轮播图加载出来，是从第一张开始的问题
    computed: {
        showSwiper(){
            return this.list.length
        }
    },

}
</script>
<style lang="stylus" scoped>
// 因为此时的css样式只对当前设置的css有效。但.swiper-pagination-bullet-active属于swiper里的样式
// 所以使用 ‘ >>> ’ 表示穿透。只要在wrapper中，遇到.swiper-pagination-bullet-active 背景色就是白色
.wrapper >>> .swiper-pagination-bullet-active
    background-color :#fff
// 解决因网速问题，文本比图片先加载，导致抖动问题  图片高/宽=31.25%  200px/640px
// 如果想设置图片宽高比例，用以下方法。如果只是设置高为31.25%  此时是相对于父级元素的高。而不是图片的宽
// 另一种写法：  有兼容性问题。vw--viewport（视口）
// .wrapper
    // width:100%
    // height:31.25vw
.wrapper
    width :100%
    overflow :hidden
    height:0
    padding-bottom :31.25%
    background-color :#eee
    .swiper-img
        width:100%
</style>
